<template>
	<div class="myCountDown" v-show="!item.common.isHidden" :style="commonStyle">
		<u-count-down
			:timestamp="timestamp"
			:separator="item.common.separator"
			:separator-size="item.common.separatorSize"
			:separator-color="item.common.separatorColor"
			:font-size="item.common.fontSize"
			:show-border="item.common.showBorder"
			:border-color="item.common.borderColor"
			:bg-color="item.common.bgColor"
			:color="item.common.color"
			:show-days="item.common.showDays"
			:show-hours="item.common.showHours"
			:show-minutes="item.common.showMinutes"
			:show-seconds="item.common.showSeconds"
			:hide-zero-day="!item.common.hideZeroDay"
		></u-count-down>
	</div>
</template>

<script>
	import calcBaseStyle from '../libs/calcBaseStyle'
	export default {
		name: 'myCountDown',
		props:{
			pageConfig: {
				type: Object,
				default(){
					return {}
				}
			},
			pcid: null
		},
		data(){
			return {
				item: {common: {},style: {},children:[]},
			}
		},
		created() {
			this.$parent.widgetList.some(widget=>{
				if(widget.cid === this.pcid){
					this.item = widget
					return true
				}
			})
		},
		computed:{
			commonStyle(){
				return calcBaseStyle(this.item,this.pageConfig.contentH)
			},
			timestamp(){
				if(!this.item.common.timestamp){
					return 0
				}
				var timestamp = new Date(this.item.common.timestamp.substring(0,19)).getTime() - new Date().getTime()
				return timestamp / 1000
			},
		}
	}
</script>

<style lang="less" scoped>
	.myCountDown {
		position: absolute;
		overflow: hidden;
	}
</style>
